<template>
	<view style="background-color: #F5F5F5;height: 100vh;">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
				<navigator open-type="navigateBack" style="padding:10rpx">
					<image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
				</navigator>
				<text>个人报修</text>
				<!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			</view>
		</view>
		<view class="" style="width: 100vw;height: 180rpx;">

		</view>
		<view class="title">
			<view class="title1">
				<view class="title1-1">
					报修信息
				</view>
				<!-- <image src="/static/bangz.png" mode="" style="margin-top: 10rpx;"></image> -->
			</view>
		</view>

		<view class="center">
			<view class="center1">
				<view class="box1">
					<view class="box1-1">
						<view class="box1-1texte">报修类别</view>
					</view>
					<view class="box1-2">
						<view class="box1-2text">个人报修</view>
					</view>
				</view>
				<view class="box1">
					<view class="box1-1">
						<view class="box1-1texte">报修项目</view>
					</view>
					<view class="box1-2">
						<picker mode="selector" @change="setproid" :range="catelist" range-key="title">
							<view class="box1-2text">{{protitle}}</view>
						</picker>
						<image src="/static/yfh.png" mode=""></image>
					</view>
				</view>
				<view class="box1">
					<view class="box1-1">
						<view class="box1-1texte">联系人</view>
					</view>
					<view class="box1-2">
						<view class="box1-2text"><input type="text" v-model="updata.name" placeholder="请输入联系人姓名" style="text-align: right;"></view>
					</view>
				</view>
				<view class="box1">
					<view class="box1-1">
						<view class="box1-1texte">联系人电话</view>
					</view>
					<view class="box1-2">
						<view class="box1-2text"><input type="tel" v-model="updata.phone" placeholder="请输入联系人电话" style="text-align: right;"></view>
					</view>
				</view>
				<view class="box1">
					<view class="box1-1">
						<view class="box1-1texte">住址信息</view>
					</view>
					<view class="box1-2">
						<picker :range="roomlist" @change="setroomid" range-key="roomname" mode="selector">
							<view class="box1-2text">{{roomtitle}}</view>
						</picker>
						<image src="/static/yfh.png" mode=""></image>
					</view>
				</view>
				<view class="box1">
					<view class="box1-1">
						<view class="box1-1texte">预约上门</view>
					</view>
					<view class="box1-2">
						<picker mode="multiSelector" :value="timearr" :range="timelist" range-key="name" @columnchange="setcolumnval" @change="setroomtime">
							<view class="box1-2text">{{roomtime}}</view>
						</picker>
						<image src="/static/yfh.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="title1">
				<view class="title1-1">
					报修内容
				</view>
			</view>
		</view>

		<view class="center">
			<view class="" style="width: 20rpx;height: 4vw;"></view>

			<view class="center2">

				<view class="center1-1">
					<textarea maxlength="240" style="height: 150rpx;" placeholder="请填写详细报修内容，有助于工作人员快速帮您解决问题" v-model="updata.content"></textarea>
				</view>
				
			</view>
			<view class="center3">
				<view style="width: 158rpx; height: 158rpx; overflow: hidden; position: relative;" v-for="(item,index) in updata.pics" :key="index">
					<i class="close" @click="delimg(index)">x</i>
					<image :src="item" mode="widthFix" style="width: 100%;"></image>
				</view>
				
				
				<image src="../../../static/xiangj.png" mode="" @click="chooseimg('pics')"></image>
			</view>
		</view>

		<view class="button" @click="save()">
			提交
		</view>
		<box ref="box"></box>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				bartop: 0,
				catelist:[],
				roomlist:[],
				updata:{
					type:1,
					proid:'',
					name:'',
					phone:'',
					roomId:'',
					content:'',
					pics:[],
					roomtime:''
				},
				protitle:'请选择报修项目',
				roomtitle:'请选择所在房产',
				roomtime:'请选择上门时间',
				timelist:[[],[],[]],
				nowh:'',
				nowf:'',
				stime:8,
				etime:18,
				timearr:[0,0,0],
				nowday:''
			}
		},
		onLoad(e) {
			that = this;
			this.bartop = this.$bartop;
			this.uploadurl = uni.getStorageSync('uploadurl')
			if(!this.uploadurl){
				that.$post('api/getuploadurl',{}).then(res=>{
					that.uploadurl = res.data.url;
				})
			}
			const initdate = new Date();
			console.log(initdate.getFullYear());
			const nextdate = new Date(initdate.getTime()+86400*1000);
			const nextdate2 = new Date(nextdate.getTime()+86400*1000);
			that.initdate = initdate;
			that.nextdate = nextdate;
			that.nextdate2 = nextdate2;
			var initmonth = initdate.getMonth()+1;
			initmonth = initmonth<10 ? '0'+initmonth : initmoney;
			var initday = initdate.getDate();
			initday = initday<10 ? '0'+initday : initday;
			var showinitday = initday;
			
			
			var nextmonth = nextdate.getMonth()+1;
			nextmonth = nextmonth<10 ? '0'+nextmonth : nextmoney;
			var nextday = nextdate.getDate();
			nextday = nextday<10 ? '0'+nextday : nextday;
			var shownextday = nextday;
			
			var nextmonth2 = nextdate2.getMonth()+1;
			nextmonth2 = nextmonth2<10 ? '0'+nextmonth2 : nextmoney2;
			var nextday2 = nextdate2.getDate();
			nextday2 = nextday2<10 ? '0'+nextday2 : nextday2;
			var shownextday2 = nextday2;
			
			
			var initday = initdate.getFullYear()+'-'+initmonth+'-'+initday;
			var nextday = nextdate.getFullYear()+'-'+nextmonth+'-'+nextday;
			var nextday2 = nextdate2.getFullYear()+'-'+nextmonth2+'-'+nextday2;
			
			that.nowday = initday;
			
			var nowh = initdate.getHours();
			var nowf = initdate.getMinutes();
			that.nowh = nowh<10 ? '0'+nowh : nowh;
			that.nowf = nowf<10 ? '0'+nowf : nowf;
			//形成多列数据
			var timelist = [];
			timelist[0]=[
				{name:'今天('+showinitday+'日)',value:initday,format:'(今天)'},
				{name:'明天('+shownextday+'日)',value:nextday,format:'(明天)'},
				{name:'后天('+shownextday2+'日)',value:nextday2,format:'(后天)'},
			];
			if(nowh>that.etime) timelist[0].splice(0,1);
			that.timelist[0] = timelist[0];
			that.setcolumn(1)
			
		},
		onShow() {
			this.initbaoxiu();
		},
		methods: {
			setcolumn(column){
				var initdate = that.initdate;
				var nextdate = that.nextdate;
				var nextdate2 = that.nextdate2;
				if(column==1){
					var hous = [];
					for(var i=that.stime; i<that.etime; i++){
						var h = i<10 ? '0'+i : i;
						if(that.timearr[0]==0&&that.timelist[0][0].value==that.nowday){
							if(h*1>=that.nowh*1) hous.push({name:h+'时',value:h});
						}else{
							hous.push({name:h+'时',value:h});
						}
					}
					that.timelist[1] = hous;
					that.setcolumn(2)
				}else{
					var fens = [];
					for(var i=0; i<61; i+=5){
						var h = i<10 ? '0'+i : i;
						if(h==60) h=59;
						if(that.timearr[0]==0&&that.timelist[0][0].value==that.nowday){
							if(h*1>=that.nowf*1) fens.push({name:h+'分',value:h});
						}else{
							fens.push({name:h+'分',value:h});
						}
					}
					that.timelist[2] = fens;
				}
				if(column<2)that.timearr=[that.timearr[0],0,0]
			},
			setcolumnval(e){
				var initdate = that.initdate;
				var nextdate = that.nextdate;
				var nextdate2 = that.nextdate2;
				var column = e.detail.column;
				var value = e.detail.value;
				that.timearr[column] = value;
				that.setcolumn(column+1);
			},
			setroomtime(){
				var date = that.timelist[0][that.timearr[0]].value;
				var format = that.timelist[0][that.timearr[0]].format;
				var house = that.timelist[1][that.timearr[1]].value;
				var fen = that.timelist[2][that.timearr[2]].value;
				that.updata.roomtime = date+' '+house+':'+fen;
				that.roomtime =  (format?format:date)+' '+house+':'+fen;
			},
			save(){
				var updata = that.updata;
				if(!updata.proid){
					uni.showToast({
						title:'请输入项目',
						icon:'error'
					})
					return false;
				}
				if(!updata.name){
					uni.showToast({
						title:'请输入姓名',
						icon:'error'
					})
					return false;
				}
				if(!updata.phone||updata.phone.length!=11||!(updata.phone>0)){
					uni.showToast({
						title:'手机号错误',
						icon:'error'
					})
					return false;
				}
				if(!updata.roomId){
					uni.showToast({
						title:'请选择房产',
						icon:'error'
					})
					return false;
				}
				if(!updata.roomtime){
					uni.showToast({
						title:'请选择时间',
						icon:'error'
					})
					return false;
				}
				that.$post('center/upbaoxiu',updata).then(res=>{
					if(res.code===0){
						uni.showModal({
							title:'报修提示',
							content:res.msg,
							showCancel:false,
							success(){
								uni.navigateBack();
							}
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
				})
			},
			delimg(index){
				uni.showModal({
					title:'删除提示',
					content:'确定删除该照片吗？',
					success(e){
						if(e.confirm){
							that.updata.pics.splice(index,1)
						}
					}
				})
			},
			chooseimg(name){
				var uploadurl = this.uploadurl
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择
					success: function (res) {
						const imgPath = res.tempFilePaths[0]
						uni.showLoading({
							title:'上传中...'
						})
						uni.uploadFile({
							url: that.uploadurl,
							filePath: imgPath,
							name: "file",
							success(res) {
								uni.hideLoading()
								let data = JSON.parse(res.data)
								var imgpath = data.data.url
								that.updata.pics.push(imgpath);
							},
							fail(err){
								wx.showModal({
									title:'错误提示',
									content:JSON.stringify(err)
								})
							},
							complete(e){
								// wx.showModal({
								// 	title:'错误提示',
								// 	content:JSON.stringify(e)
								// })
							}
						})
					}
				
				})
			},
			setroomid(e){
				var index = e ? e.detail.value : 0;
				that.roomtitle = that.roomlist[index].roomname;
				that.updata.roomId = that.roomlist[index].roomId;
			},
			setproid(e){
				var index = e.detail.value;
				var protitle = that.catelist[index].title;
				var proid = that.catelist[index].id;
				that.protitle = protitle;
				that.updata.proid = proid;
			},
			initbaoxiu(){
				that.$post('center/initbaoxiu',{type:1}).then(res=>{
					that.updata.phone = res.data.user.phone;
					that.updata.name = res.data.user.name;
					that.updata.roomId = res.data.roomlist[0].roomId;
					that.updata.proid = res.data.list[0].id;
					that.catelist = res.data.list;
					that.roomlist = res.data.roomlist;
					
					
					if(that.roomlist.length==0){
						var box = {
							isshow:true,
							title:'请绑定房产',
							content:'请先进行房产绑定',
							content2:'然后进行数据录入',
							btntitle:'去绑定',
							path:'/pages/fangchanbangding/fangchanbangding',
							type:2
						}
						that.$refs.box.open(box);
						return false;
					}
					that.setroomid('');
				})
			}
		}
	}
</script>

<style lang="scss">
	.close{
		position: absolute; background-color: red; color: #ffffff; width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 50%; right: 0rpx; text-align: center;
	}
	.box {
		width: 90vw;
		margin: 0 auto;
		/* display: flex; */
	}

	.box1 {
		width: 90vw;
		margin: 0 auto;
		padding: 40rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f4f4f4;

		>image {
			width: 12rpx;
			height: 24rpx;
		}

		.box1-2 {
			display: flex;
			align-items: center;

			.box1-2text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				padding-right: 16rpx;
			}

			>image {
				margin-left: 10rpx;
				width: 12rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}

		}

		.box1-1 {
			display: flex;
			align-items: center;

			>image {
				width: 56rpx;
				height: 56rpx;
			}

			.box1-1texte {
				margin-left: 20rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #2A2A2A;
				line-height: 46rpx;
			}
		}

	}

	.title {
		width: 100vw;
		border-left: rgb(241, 145, 73) solid 6rpx;
		margin-top: 10px;

		.title1 {
			width: 94vw;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.title1-1 {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #333333;
			}

			>image {
				width: 27rpx;
				height: 27rpx;
			}
		}
	}

	.center {
		width: 94vw;
		margin: 20rpx auto;
		background-color: white;
		border-radius: 20rpx;

		.center2 {
			width: 86vw;
			height: 200rpx;
			margin: 0 auto;
			background-color: rgb(238, 238, 238);

			.center1-1 {
				padding: 3vw;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}

			.center1-2 {
				position: relative;
				top: 80rpx;
				left: 76vw;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
		}

		.center3 {
			display: flex;
			width: 86vw;
			margin: 20rpx auto;

			>image {
				width: 158rpx;
				height: 158rpx;
			}
		}
	}

	.button {
		margin: 20rpx auto;
		margin-top: 100rpx;
		background-image: url('../../../static/ann.png');
		background-size: 700rpx;
		width: 700rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
